<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 1. 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 2. 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 3. 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <h1>菜品列表</h1>

    <el-badge :value="0" class="item" style="float: right;">
        <el-button @click="getShoppingCar"><i class="el-icon-s-goods"></i>购物车</el-button>
    </el-badge>
    <el-table :data="dishesList">
        <el-table-column label="菜品编号" align="center" prop="dishesId"></el-table-column>
        </el-table-column>
        <el-table-column label="菜品名称" align="center" prop="dishesName">
            <template slot-scope="scope">
                <span v-html="scope.row.dishesName"></span>
            </template>
        </el-table-column>
        <el-table-column label="菜品价格" align="center" prop="dishesPrice"></el-table-column>
        <el-table-column label="菜品图片" align="center" prop="picture" width="130px">
            <template slot-scope="scope">
                <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.picture"></el-image>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                        size="medium"
                        type="primary"
                        icon="el-icon-edit"
                        @click="openDialog(scope.row)"
                >加入购物车
                </el-button>
            </template>
        </el-table-column>
    </el-table>


    <!--    分页-->
    <el-pagination
            align="center"
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
    ></el-pagination>


    <!-- 添加或修改菜品对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>

        <p style="margin-left: 170px;">菜品名称:{{dishes.dishesName}} </p>
        <p style="margin-left: 170px;">菜品价格: {{dishes.dishesPrice}} </p>

        <p style="margin-left: 170px;">
            <el-image
                    style="width: 100px; height: 100px"
                    :src="dishes.picture"></el-image>
        </p>
        <p style="margin-left: 170px;">
            <el-input-number v-model="num" label="数量"></el-input-number>
        </p>


        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="joinShoppingCar">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>


    <el-drawer
            title="我的购物车!"
            :visible.sync="carTable"
            direction="ltr"
            size="55%">
        <el-table :data="shoppingCar">
            <el-table-column label="菜品名称" align="center" property="dishesName"></el-table-column>
            <el-table-column label="菜品单价" align="center" property="dishesPrice"></el-table-column>
            <el-table-column label="菜品图片" align="center" width="130px">
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.picture"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.count" label="数量"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="金额" align="center" property="totalPrice"></el-table-column>
        </el-table>

        备注:
        <el-input v-model="orderDetail.remark" type="textarea" placeholder="备注"
                  :autosize="{minRows: 4, maxRows: 4}" :style="{width: '60%'}"></el-input>


        <el-button style="margin-left: 500px;margin-top: 30px;" @click="selectCoupon">选择优惠券</el-button>


        </script>


        <p style="margin-left: 500px;">总计: {{order.orderPrice}} 元</p>
        <p style="margin-left: 500px;">已优惠: {{order.concessionsPrice}} 元</p>
        <p style="margin-left: 500px;">总计: {{order.realPrice}} 元</p>

        <el-button style="float: right;margin-top: 30px;" type="primary" @click="commitOrder">提交订单</el-button>


        <el-drawer
                title="选择优惠券"
                :append-to-body="true"
                :visible.sync="innerDrawer">
            <el-table :data="couponList" :row-key="getRowKey" @selection-change="handleSelectionChange">
                <el-table-column align="center">
                    <template slot-scope="scope">
                        <iframe
                                :src="'http://wechat.free.idcfengye.com/coupon/'+scope.row.couponId+'.html'"
                                width="100%"
                                frameborder="0"
                                scrolling="no"></iframe>
                    </template>
                </el-table-column>
                <el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column>
            </el-table>

            <el-button
                    size="medium "
                    type="primary"
                    icon="el-icon-button"
                    @click="ackCoupon"
            >确定
            </el-button>
        </el-drawer>
    </el-drawer>


</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            info: {
                storeId: '8339745932851585024',
                tableId: '1578945621456251',
                openId: 'o-NAh5tIxw8vtwbPOj9DnMNgNX24'
            },
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            open: false,
            // 菜品表格数据
            dishesList: [],
            // 弹出层标题
            title: "规格",
            // 查询参数
            queryParams: {
                storeId: '',
                dishesTypeId: null,
                dishesName: null,
                dishesPrice: null,
                pageNum: 1,
                pageSize: 5,
            },
            //订单详情
            orderDetail: {},
            //菜品类型
            dishes: {},
            //菜品数量
            num: 1,
            shoppingCar: [],
            carTable: false,
            innerDrawer: false,
            couponList: [],
            realPrice: 0,
            order: {
                storeId: null,
                tableId: null,
                sikgaekId: null,
                orderPrice: null,
                isPay: 0,   //0 待支付
                concessionsPrice: 0,   //优惠金额
                realPrice: null,          //实付金额
            },
            faceValue: [],
            orderDetail: {},
        },
        methods: {
            /** 查询菜品列表 */
            getList() {
                axios.get('http://wechart.5gzvip.91tunnel.com/wechat/dishes', {params: this.queryParams}).then(response => {
                    this.dishesList = response.data.rows;
                    this.total = response.data.total;
                });
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.couponId)
                this.faceValue = selection.map(item => item.faceValue)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            joinShoppingCar() {
                this.dishes.count = this.num;
                this.dishes.tableId = this.info.tableId;
                axios.post('http://wechart.5gzvip.91tunnel.com/wechat/joinCar', this.dishes).then(resp => {
                    if (resp.data.code == 200) {
                        this.$message.success("加入成功!")
                    } else {

                    }
                    this.open = false;
                });
            },
            openDialog(dishes) {
                this.open = true;
                this.dishes = dishes;
                this.num = 1;
            },
            cancel() {
                this.open = false;
                this.num = 1;
            },
            getShoppingCar() {
                axios.get('http://wechart.5gzvip.91tunnel.com/wechat/getCar', {
                    params: {
                        'storeId': this.info.storeId,
                        'tableId': this.info.tableId
                    }
                }).then(response => {
                    if (response.data.code == 200) {
                        this.shoppingCar = response.data.data.tbDishesVoList;
                        this.order.orderPrice = response.data.data.sum;
                        this.order.realPrice = response.data.data.sum;
                        this.carTable = true;
                    } else {
                        this.$message.error(response.data.msg)
                    }
                });
            },
            selectCoupon() {
                axios.get('http://wechart.5gzvip.91tunnel.com/wechat/myCoupon', {
                    params: {
                        'sikgaekId': this.info.openId,
                        'status': 0
                    }
                }).then(response => {
                    if (response.data.code == 200) {
                        this.couponList = response.data.data;
                        this.innerDrawer = true;
                    } else {

                    }
                });
            },
            //确定选择的优惠券
            ackCoupon() {
                this.order.concessionsPrice = 0;
                for (var i in this.faceValue) {
                    this.order.concessionsPrice += this.faceValue[i];
                }
                this.order.realPrice = this.order.orderPrice - this.order.concessionsPrice;
                this.innerDrawer = false;
            },
            //table  勾选回显
            getRowKey(row) {
                return row.couponId;
            },
            commitOrder() {
                this.orderDetail.couponIds = this.ids.join(',');
                console.log(this.orderDetail.couponIds)
                axios.post('http://wechart.5gzvip.91tunnel.com/wechat/commitOrder', this.order, {
                    params: this.orderDetail
                }).then(resp => {
                    if (resp.data.code == 200) {
                        this.$message.success("下单成功!")
                        this.carTable = false;
                    } else {
                        this.$message.error(resp.data.msg)
                    }
                });
            }
        },
        created() {
            var params = location.search.substring(1);
            var array = params.split("&");
            for (var i in array) {
                var param = array[i].split("=");
                this.info[param[0]] = param[1];
            }
            this.queryParams.storeId = this.info.storeId;
            //订单属性
            this.order.storeId = this.info.storeId;
            this.order.tableId = this.info.tableId;
            this.order.sikgaekId = this.info.openId;
            this.getList();
        }
    })
</script>
</html>